<template>
  <view class="layout">
    <view class="title-bar">
      <view class="left-title">
        <view class="flag" />
        <wd-text text="今日运动记录" color="#000000" size="12px" />
      </view>
    </view>
    <wd-table
      v-if="dataList.length > 0"
      :data="dataList"
      :height="200"
      :stripe="false"
      :border="false"
    >
      <wd-table-col prop="time" label="时间" />
      <wd-table-col prop="sportName" label="项目" />
      <wd-table-col prop="score" label="成绩(个)" />
      <wd-table-col prop="evaluate" label="评价" />
      <wd-table-col prop="scoreValue" label="成长值" />
    </wd-table>
    <view v-else class="no-data"> 暂无运动数据 </view>
  </view>
</template>

<script lang="ts" setup>
const isParticipated = ref(false);
const dataList = reactive([
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
]);
</script>

<style lang="scss" scoped>
.layout {
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  width: calc(100% - 20px);
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.flag {
  width: 2px;
  height: 11px;
  background: #095aeb;
  margin-right: 10px;
}
.left-title {
  display: flex;
  align-items: center;
}
.right-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  .right-title-item {
    font-weight: normal;
    line-height: 12px;
    text-align: center;
    letter-spacing: 0.005em;
    color: #000000;
    margin-bottom: 5px;
  }
  .right-title-participated {
    font-weight: normal;
    line-height: 12px;
    text-align: center;
    letter-spacing: 0.005em;
    color: #14c900;
  }
  .right-title-not-participated {
    font-weight: normal;
    line-height: 12px;
    text-align: center;
    letter-spacing: 0.005em;
    color: #ff2d2d;
  }
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 74px;
}
.item-value {
  display: flex;
  width: 100%;
  font-size: 20px;
  color: #000000;
  justify-content: center;
}
.item-title {
  display: flex;
  width: 100%;
  font-size: 12px;
  color: #000000;
  justify-content: center;
}
.today-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 74px;
}
.sport-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 128px;
}
.no-data {
  height: 140px;
  font-size: 12px;
  font-weight: normal;
  line-height: 140px;
  text-align: center;
  letter-spacing: 0.005em;
  color: #666666;
}
</style>
